<template>
  <div>
    <my-header :showBack="true" title="收支流水"></my-header>
    <div class="revenue_record">
      <van-tabs v-model="selected">
        <van-tab title="帮余额账单">
          <van-list v-if="moneyList.length>0"  v-model="loading" :finished="finished"  @load="loadMore" :offset="20">
            <ul class="revenue_record_list">
              <li v-for="item in moneyList">
                <div>
                  <span>{{item.profitHavedTime | formatDate}}</span>
                  <span>{{item.profitRemark}}</span>
                </div>
                <div>
                  <i :class="[item.profitStatus==1?'green_class':'red_class']">
                    <em v-show="item.profitStatus==1">+</em>
                    <em v-show="item.profitStatus==2">-</em>
                    {{Math.floor(item.profitNum*100000)/100000}}</i>
                </div>
              </li>
            </ul>
          </van-list>
          <div class="no_data" v-else>{{$t("lang.NoData")}}</div>
        </van-tab>
        <van-tab title="帮积分账单">
          <van-list v-if="integralList.length>0" v-model="loading1" :finished="finished1"  @load="loadMore" :offset="20">
            <ul class="revenue_record_list">
              <li v-for="item in integralList">
                <div>
                  <span>{{item.profitHavedTime | formatDate}}</span>
                  <span>{{item.profitRemark}}</span>
                </div>
                <div>
                  <i :class="[item.profitStatus==1?'green_class':'red_class']">
                    <em v-show="item.profitStatus==1">+</em>
                    <em v-show="item.profitStatus==2">-</em>
                    {{Math.floor(item.profitNum*100000)/100000}}
                  </i>
                </div>
              </li>
            </ul>
          </van-list>
          <div class="no_data" v-else>{{$t("lang.NoData")}}</div>
        </van-tab>
        <van-tab title="CEC 账单">
          <van-list v-if="cecList.length>0" v-model="loading2" :finished="finished2"  @load="loadMore" :offset="20">
            <ul class="revenue_record_list">
              <li v-for="item in cecList">
                <div>
                  <span>{{item.profitHavedTime | formatDate}}</span>
                  <span>{{item.profitRemark}}</span>
                </div>
                <div>
                  <i :class="[item.profitStatus==1?'green_class':'red_class']">
                    <em v-show="item.profitStatus==1">+</em>
                    <em v-show="item.profitStatus==2">-</em>
                    {{Math.floor(item.profitNum*100000)/100000}}
                  </i>
                </div>
              </li>
            </ul>
          </van-list>
          <div class="no_data" v-else>{{$t("lang.NoData")}}</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import timeFormat from "../../store/timeFormat";
import header from "@/components/header";

import { Toast } from "vant";
export default {
  components: {
    "my-header": header
  },
  data(){
    return {
      selected:0,
      searchData: {
        //分页属性
        pageNo: 1, //当前页
        pageSize: 30, //每页20条
        type: 1
      },

      loading: false,
      finished: true,
      moneyList: [],

      loading1: false,
      finished1: true,
      integralList: [],

      loading2: false,
      finished2: true,
      cecList: []
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  watch: {
    selected(val) {
      if (val == 0) {
        this.searchData.type = 1;
      } else if(val == 1) {
        this.searchData.type = 3;
      } else {
        this.searchData.type = 2;
      }
      this.initList();
    }
  },
  mounted(){
    this.initList();
  },
  methods: {
    initList() {
      this.searchData.pageNo = 1;
      this.$ajax(this.$api.selectCustomerProfit, this.searchData).then(
        res => {
          if (res.code === 0) {
            if (res.data && res.data.list.length > 0) {
              if (this.selected == "0") {
                this.moneyList = res.data.list;
                this.finished = this.searchData.pageNo == res.data.pageCount;
                this.loading = false;
              } else if(this.selected == '1'){
                this.integralList = res.data.list;
                this.finished1 = this.searchData.pageNo == res.data.pageCount;
                this.loading1 = false;
              }else{
                this.cecList = res.data.list;
                this.finished2 = this.searchData.pageNo == res.data.pageCount;
                this.loading2 = false;
              }
            }else {
              this.moneyList = [];
              this.integralList = [];
              this.cecList = [];
            }
          } 
        }
      );
    },
    loadMore() {
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectCustomerProfit, this.searchData).then(
        res => {
          if (res.code === 0) {
            if (res.data && res.data.list.length > 0) {
              if (this.selected == "0") {
                this.moneyList = this.moneyList.concat(res.data.list);
                this.finished = this.searchData.pageNo == res.data.pageCount;
                this.loading = false;
              } else if(this.selected == '1'){
                this.integralList = this.integralList.concat(res.data.list);
                this.finished1 = this.searchData.pageNo == res.data.pageCount;
                this.loading1 = false;
              }else{
                this.cecList = this.cecList.concat(res.data.list);
                this.finished2 = this.searchData.pageNo == res.data.pageCount;
                this.loading2 = false;
              }
            }
          }
        }
      );
    },
  }
}
</script>

<style scped>
.revenue_record{
  font-size: 14px;
}
.revenue_record_list li {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: #666;
  background: #fff;
  margin-top: 5px;
  border-bottom: 1px #f2f2f2 solid;
}
.revenue_record_list li div:first-child {
  flex: 1;
  line-height: 25px;
}
.revenue_record_list span {
  display: block;
}
.revenue_record_list span:first-child {
  font-size: 12px;
}
.revenue_record_list i {
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
  margin-left: 10px;
}
.green_class{
  background: #01a715;
}
.red_class{
  background: #f44;
}
</style>
